<template>
  <div>
    <el-card class="search-card">
      <basic-form
        ref="formData"
        defaultExpandStatus
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        :handleClearForm="clearCategorySelect"
        @getFormData="getFormData"
      >
        <CategoryMultipleSelect
          slot="category"
          ref="categoryMultiple"
          @selectCategoryCallback="setFormCateUuids"
        />
      </basic-form>
    </el-card>
    <el-card class="table-card">
      <skus-table
        ref="skusTable"
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <!-- 按钮操作栏 -->
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </el-card>
    <ViewChangeLogDialog
      :visible.sync="viewChangeLog.visible"
      :cur-row="viewChangeLog.curRow"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import CategoryMultipleSelect from '@/components/Category/MultipleSelect';
import ViewChangeLogDialog from './components/ViewChangeLogDialog';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants/list';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid, setAuthBtnId } from '@/utils/bizUtils';
import skusPage from '@/mixins/commodity/skusPage';
import {
  getProductMarkupRateGroupVosService,
  exportProductMarkupRateGroupDataService
} from '@/api/basics/categoryManage/guideMarkupRate';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender,
    CategoryMultipleSelect,
    ViewChangeLogDialog
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: {
        export: false
      },
      pageSizes: [10, 100, 1000],
      viewChangeLog: {
        visible: false,
        curRow: {}
      }
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const addBtn = { label: '新增', method: this.handleAdd, hasAuth: true }
      const editn = { label: '编辑', method: this.handleEdit, hasAuth: true }
      const exportBtn = { label: '导出', method: this.handleExport, loading: this.btnLoading.export, hasAuth: true }
      // 按钮通用属性填充
      const btnBars = [addBtn, editn, exportBtn]
      return getListPageBtnsBar(h, btnBars, this.showBtn, 'start')
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = row?.brandName ? [{ label: '修改日志', method: this.handleViewChangeLog }] : []
      return getTableAction({ h, row, actionList })
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = { ...this.formData, ...this.paginationParams }
      const res = await getProductMarkupRateGroupVosService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData.results)
        this.setTotalNum(res.retData.totalNum)
      }
    },
    // 查看修改日志
    handleViewChangeLog (row) {
      this.viewChangeLog.visible = true
      this.viewChangeLog.curRow = row
    },
    // 导出
    async handleExport () {
      setAuthBtnId('查询') // 此处数据权限等同查询，给查询按钮id
      const data = { ...this.formData }
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await exportProductMarkupRateGroupDataService(data, loadingFn)
      createExcelByExport({ excelTitle: `集团售价指导加价率_${generateUuid()}`, res })
    },
    // 新增
    handleAdd () {
      this.$router.push({ name: 'guideMarkupRateAdd' })
    },
    // 编辑
    handleEdit () {
      this.$router.push({ name: 'guideMarkupRateEdit' })
    },
    // 获取关联品类信息
    setFormCateUuids (list) {
      this.formData.categoryUuids = list.map(item => item.categoryUuid)
    },
    // 清空品类选择信息
    clearCategorySelect () {
      this.$refs.categoryMultiple.clearSelectResult()
    },
  }
}
</script>
